<template>
	<view class="content">
		<z-paging ref="paging" v-model="planList" @query="queryList">
			<template #top>
				<u-sticky>
					<view class="bg_color_fff">
						<uni-nav-bar status-bar :border='false'>
							<template #left>
								<image src="/static/image/logo/logo.png" class="logo"></image>
							</template>
						</uni-nav-bar>
						<u-tabs :list="list1" :current="current" :activeStyle="{
	    color: '#E5725F',
	    fontWeight: '600',
		fontFamily: 'PingFang SC',
		fontSize: '32rpx',
		letterSpacing: '2rpx',
	}" :inactiveStyle="{
	    color: '#6D6D6D',
	    fontWeight: '600',
	    fontSize: '32rpx',
		fontFamily: 'PingFang SC',
	    letterSpacing: '2rpx',
	}" :scrollable="false" lineWidth="100" lineColor="#E5725F" @click="tagChange">
						</u-tabs>
					</view>
				</u-sticky>
			</template>
			<template slot="refresher">
				<view class="mar_bottom40 mar_top40">
					
				</view>
				<u-loading-icon mode="semicircle"></u-loading-icon>
			</template>
			<view class="Index">
				<!-- 瀑布流布局列表 -->
				<view class="pubuBox">
					<view class="pubuItem">
						<view class="item-masonry" v-for="(item, index) in planList" :key="index">
							<image class="masonry-iamge" :src="item.plan.images ? item.plan.images[0] :''" lazy-load
								mode="aspectFill" @click="goToDetails(item.plan.planUuid)"></image>
							<view class="listtitle padding_l_r20">
								<!-- 这是没有高度的父盒子（下半部分） -->
								<view class="listtitle1 fontS28">{{ item.plan.title }}</view>
								<view class="mar_top20 flex justify-between align-center">
									<view class="head">
										<view class="head-img">
											<image :src="item.user.userProfileImg" mode="" class="head-img"></image>
										</view>
										<view class="fontS20 mar_left16">{{ item.user.username }}</view>
									</view>
									<view class="flex align-center" v-if="item.userLiked == false"
										@click="handelLike(item.plan.planUuid)">
										<u-icon name="heart" size="14"></u-icon>
										<text class="fontS20">{{ item.plan.likes }}</text>
									</view>
									<view class="flex align-center" v-else @click="handelLikeGZ(item.plan.planUuid)">
										<u-icon name="heart-fill" color="red" size="14"></u-icon>
										<text class="fontS20" style="color: red">{{ item.plan.likes }}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<template #empty>
				<view class="emptyBox">
					<view class="empty">
						<image src="/static/my/empty.png"></image>
						<view>什么都没有～</view>
					</view>
				</view>
			</template>
			<template #bottom>
				<z-tabbar :current="0" :fixed="true"></z-tabbar>
			</template>
		</z-paging>
	</view>
</template>

<script setup>
	import zTabbar from '@/components/z-tabbar/z-tabbar.vue';
	import {
		ref,
		computed,
		getCurrentInstance
	} from "vue";
	import {
		onLoad,
		onShow,
		onShareAppMessage,
		onPullDownRefresh
	} from '@dcloudio/uni-app';
	const list1 = ref([{
		name: '推荐',
	}, {
		name: '关注'
	}])
	const {
		proxy
	} = getCurrentInstance()
	const column = ref(3);
	const current = ref(0)
	const planList = ref([])
	const like = ref(true)
	const likeGZ = ref(true)
	const change = (index) => {
		current.value = index;
	}
	// 分页
	const is_last_page = ref(false)
	const pushData = ref({
		page: 0,
		pageSize: 20
	})

	// 点赞
	const handelLike = (id) => {
		if (uni.getStorageSync('token')) {
			proxy.$api.collect(id, {
				action: "like"
			}).then(res => {
				if (res.code === "10000") {
					ResetData()
				}
			})
		} else {
			uni.navigateTo({
				url: '/pages/login/login'
			})
		}
	}
	// 取消点赞
	const handelLikeGZ = (id) => {
		if (uni.getStorageSync('token')) {
			proxy.$api.collect(id, {
				action: "unlike"
			}).then(res => {
				if (res.code === "10000") {
					ResetData()
				}
			})
		} else {
			uni.navigateTo({
				url: '/pages/login/login'
			})
		}
	}

	const tagChange = (el) => {
		current.value = el.index
		ResetData()
	}

	const ResetData = () => {
		pushData.value = []
		is_last_page.value = false
		pushData.page = 0
		getList()
	}
	const goToDetails = (id) => {
		// 去详情页面
		uni.navigateTo({
			url: `/pages/index/details?id=${id}`
		})
	}

	// 获取列表
	const getList = async () => {
		if (is_last_page.value) return
		pushData.value.page++
		if (current.value === 0) {
			const res = await proxy.$api.recommend()
			// planList.value = planList.value.concat(res.data)
			planList.value = res.data;
			//将请求的结果数组传递给z-paging
			paging.value.complete(res.data);
		} else if (current.value === 1) {
			if (uni.getStorageSync('token')) {
				const res = await proxy.$api.flowing()
				// planList.value = planList.value.concat(res.data)
				planList.value = res.data;
				//将请求的结果数组传递给z-paging
				paging.value.complete(res.data);
			} else {
				planList.value = [];
				paging.value.complete([]);
			}
		}
	}

	// 下拉刷新
	const paging = ref(null);
	const queryList = (pageNo, pageSize) => {
		ResetData();
	}

	onLoad(() => {
		ResetData();
	})
</script>

<style scoped lang="scss">
	.Index {
		width: 100%;
		height: 100%;
	}

	.pubuBox {
		padding: 22rpx;

	}

	.pubuItem {
		column-count: 2;
		column-gap: 20rpx;
	}

	.item-masonry {
		box-sizing: border-box;
		border-radius: 15rpx;
		overflow: hidden;
		background-color: #fff;
		break-inside: avoid;
		/*避免在元素内部插入分页符*/
		box-sizing: border-box;
		margin-bottom: 20rpx;
		padding-bottom: 20rpx;
		// box-shadow: 0px 0px 28rpx 1rpx rgba(78, 101, 153, 0.14);

		.masonry-iamge {
			max-height: 400rpx;
		}
	}

	.item-masonry image {
		width: 100%;
	}

	.listtitle {

		.listtitle1 {
			line-height: 39rpx;
			text-overflow: -o-ellipsis-lastline;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			line-clamp: 2;
			-webkit-box-orient: vertical;
			min-height: 39rpx;
			max-height: 78rpx;
		}

		.listtitle2 {
			color: #ff0000;
			font-size: 32rpx;
			line-height: 32rpx;
			font-weight: bold;
			padding-top: 22rpx;

			.listtitle2son {
				font-size: 32rpx;
			}
		}

		.listtitle3 {
			font-size: 28rpx;
			color: #909399;
			line-height: 32rpx;
			padding-top: 22rpx;
		}
	}

	.logo {
		width: 182rpx;
		height: 66rpx;
		margin-top: 107rpx;
		margin-left: 24rpx;
	}

	.content {
		min-height: 100vh;
		padding-bottom: 50rpx;
		box-sizing: border-box;
		background-color: #f8f8f8;
	}

	:deep(.uv-subsection) {
		background: #fff !important;
	}

	:deep(.uv-subsection__item__text) {
		font-size: 32rpx !important;
	}

	.head {
		display: flex;
		align-items: center;

		.head-img {
			width: 48rpx;
			height: 48rpx;
			border-radius: 50%;

			image {
				width: inherit;
				height: inherit;
				border-radius: inherit;
			}
		}
	}

	.emptyBox {
		width: 100%;
		background-color: #f8f8f8;
		height: 692rpx;
		display: flex;
		justify-content: center;
		align-items: center;

		.empty {
			width: 228rpx;
			margin: 0 auto;
			font-family: PingFang SC;
			font-size: 24rpx;
			font-weight: 400;
			color: #6D6D6D;
			display: flex;
			flex-wrap: wrap;
			justify-content: center;

			image {
				width: 228rpx;
				height: 268rpx;
				margin-bottom: 30rpx;
			}
		}
	}
</style>